<template>
  <div class="index-box">
    <div class="layout">
      <Layout>
        <Header class="layout-header">
          <div class="layout-logo">LOGO</div>
          <div class="layout-nav">
            <div class="layout-left">
              Smartint 后台管理系统
            </div>
            <div class="layout-right">
              <span class="layout-welcome">欢迎，Evelyn</span>
              <span class="layout-logout" @click="onClickLogout">
                <Icon type="ios-exit-outline" class="layout-icon" />退出登录
              </span>
            </div>
          </div>
        </Header>
        <Layout>
          <Sider
            id="layoutSider"
            hide-trigger
            :style="{height: 'calc(100vh - 66px)', overflow: 'auto'}"
          >
            <Menu
              :active-name="activeUrl"
              theme="dark"
              width="auto"
              ref="side_menu"
              :open-names="openNames"
              @on-open-change="menuOpenChange"
            >
              <!-- <template v-for="(item, index) in menuShowArr">
                <MenuGroup :title="item.title" v-if="item.children.length > 0">
                  <template  v-for="(itemChild, indexChild) in item.children">
                    <MenuItem
                      :name="itemChild.url"
                      :to="itemChild.url"
                    >
                      {{ itemChild.title }}
                    </MenuItem>
                  </template>
                </MenuGroup>
              </template> -->

              <Submenu name="0" v-if="menuShowArr[0].children.length > 0">
                <template slot="title">
                  首页管理
                </template>
                <template v-for="(item, index) in menuShowArr[0].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>
              <Submenu name="1" v-if="menuShowArr[1].children.length > 0">
                <template slot="title">
                  活动管理
                </template>
                <template v-for="(item, index) in menuShowArr[1].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>
              <Submenu name="2" v-if="menuShowArr[2].children.length > 0">
                <template slot="title">
                  问卷管理
                </template>
                <template v-for="(item, index) in menuShowArr[2].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>
              <Submenu name="3" v-if="menuShowArr[3].children.length > 0">
                <template slot="title">
                  测评管理
                </template>
                <template v-for="(item, index) in menuShowArr[3].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>
              <Submenu name="4" v-if="menuShowArr[4].children.length > 0">
                <template slot="title">
                  商城管理
                </template>
                <template v-for="(item, index) in menuShowArr[4].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>
              <Submenu name="5" v-if="menuShowArr[5].children.length > 0">
                <template slot="title">
                  报表
                </template>
                <template v-for="(item, index) in menuShowArr[5].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>
              <Submenu name="6" v-if="menuShowArr[6].children.length > 0">
                <template slot="title">
                  后台管理
                </template>
                <template v-for="(item, index) in menuShowArr[6].children">
                  <MenuItem
                    :name="item.url"
                    :to="item.url"
                  >{{ item.title }}</MenuItem>
                </template>
              </Submenu>

              <!-- <Submenu name="1">
                <template slot="title">
                  首页管理
                </template>
                <MenuItem
                  :name="'/banner-management'"
                  :to="'/banner-management'"
                >Banner管理</MenuItem>
                <MenuItem
                  :name="'/picture-management'"
                  :to="'/picture-management'"
                >版面图片管理</MenuItem>
              </Submenu>
              <Submenu name="2">
                <template slot="title">
                  活动管理
                </template>
                <MenuItem
                  :name="'/activity-management'"
                  :to="'/activity-management'"
                >活动分类管理</MenuItem>
                <MenuItem
                  :name="'/activity-list'"
                  :to="'/activity-list'"
                >活动列表</MenuItem>
              </Submenu>
              <Submenu name="3">
                <template slot="title">
                  问卷管理
                </template>
                <MenuItem
                  :name="'/questionnaire'"
                  :to="'/questionnaire'"
                >问卷列表</MenuItem>
              </Submenu>
              <Submenu name="4">
                <template slot="title">
                  测评管理
                </template>
                <MenuItem
                  :name="'/evaluation'"
                  :to="'/evaluation'"
                >测评列表</MenuItem>
              </Submenu>
              <Submenu name="5">
                <template slot="title">
                  商城管理
                </template>
                <MenuItem
                  :name="'/mall-classification'"
                  :to="'/mall-classification'"
                >商品分类管理</MenuItem>
                <MenuItem
                  :name="'/mall-list'"
                  :to="'/mall-list'"
                >商品列表</MenuItem>
                <MenuItem
                  :name="'/mall-hot'"
                  :to="'/mall-hot'"
                >热门活动管理</MenuItem>
              </Submenu>
              <Submenu name="6">
                <template slot="title">
                  报表
                </template>
                <MenuItem
                  :name="'/report-order'"
                  :to="'/report-order'"
                >订单报表</MenuItem>
                <MenuItem
                  :name="'/report-user'"
                  :to="'/report-user'"
                >用户报表</MenuItem>
                <MenuItem
                  :name="'/report-complaint'"
                  :to="'/report-complaint'"
                >申诉报表</MenuItem>
                <MenuItem
                  :name="'/report-invoice'"
                  :to="'/report-invoice'"
                >开票报表</MenuItem>
              </Submenu>
              <Submenu name="7">
                <template slot="title">
                  后台管理
                </template>
                <MenuItem
                  :name="'/background-permission'"
                  :to="'/background-permission'"
                >权限管理</MenuItem>
                <MenuItem
                  :name="'/report-account'"
                  :to="'/report-account'"
                >账号管理</MenuItem>
              </Submenu> -->
            </Menu>
          </Sider>
          <Layout class="layout-container">
            <router-view></router-view>
          </Layout>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeUrl: '',
      openNames: ['0'],
      menuShowArr: [{
        title: '首页管理',
        children: [{
          id: '1-1',
          title: 'banner管理',
          url: '/banner-management'
        },{
          id: '1-2',
          title: '版面图片管理',
          url: '/picture-management'
        }]
      },{
        title: '活动管理',
        children: [{
          id: '2-1',
          title: '活动分类管理',
          url: '/activity-management'
        },{
          id: '2-2',
          title: '活动列表',
          url: '/activity-list'
        }]
      },{
        title: '问卷管理',
        children: [{
          id: '3-1',
          title: '问卷管理',
          url: '/questionnaire'
        }]
      },{
        title: '测评管理',
        children: [{
          id: '4-1',
          title: '测评列表',
          url: '/evaluation'
        }]
      },{
        title: '商城管理',
        children: [{
          id: '5-1',
          title: '商品分类管理',
          url: '/mall-classification'
        },{
          id: '5-2',
          title: '商品列表',
          url: '/mall-list'
        },{
          id: '5-3',
          title: '热门活动管理',
          url: '/mall-hot'
        }]
      },{
        title: '报表',
        children: [{
          id: '6-1',
          title: '订单报表',
          url: '/report-order'
        },{
          id: '6-2',
          title: '用户报表',
          url: '/report-user'
        },{
          id: '6-3',
          title: '申诉报表',
          url: '/report-complaint'
        },{
          id: '6-4',
          title: '开票报表',
          url: '/report-invoice'
        }]
      },{
        title: '后台管理',
        children: [{
          id: '7-1',
          title: '权限管理',
          url: '/background-permission'
        },{
          id: '7-2',
          title: '账号管理',
          url: '/report-account'
        }]
      }]
    }
  },
  mounted() {
    // activeUrl
    this.activeUrl = this.$route.path == '/index' ? '/banner-management' : this.$route.path
    let menuNameArr = sessionStorage.getItem('menuNameArr') || '0'
    this.openNames = menuNameArr.split(',')

    this.$nextTick(() => {
      this.$refs.side_menu.updateOpened()
      this.$refs.side_menu.updateActiveName()
    })
  },
  methods: {
    onClickLogout() {
      sessionStorage.removeItem('menuNameArr')
      sessionStorage.removeItem('token')
      this.$router.push('/')
    },
    menuOpenChange(name) {
      sessionStorage.setItem('menuNameArr', name.join(','))
    }
  }
}
</script>

<style scoped>
.index-box {

}
.layout{
  height: 100vh;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
}
.layout-header {
  display: flex;
  align-items: center;
}
.layout-logo{
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: lightblue;
  border-radius: 3px;
  float: left;
  margin-right: 50px;
}
.layout-nav{
  width: calc(100% - 200px);
  margin-left: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.layout-nav .layout-left {
  font-size: 24px;
}
.layout-nav .layout-right {
}
.layout-nav .layout-right .layout-welcome {
  font-size: 18px;
  margin-right: 60px;
}
.layout-nav .layout-right .layout-logout {
  cursor: pointer;
  font-size: 16px;
}
.layout-nav .layout-right .layout-icon {
  font-size: 28px;
  position: relative;
  top: -1px;
  margin-right: 3px;
}
.layout-container {
  height: calc(100vh - 66px);
}
</style>
